<!--
 * @Author       : xiangmin
 * @File         : 使用封装的表单咯
 * @Date         : 2023-07-07 10:01:16
 * @LastEditors  : xiangmin
 * @LastEditTime : 2024-06-25 17:07:41
-->
<template>
	<a-card>
		<c-form
			ref="formRef"
			:span="24"
			:model="formModel"
			:label-col="{ span: 3, offset: 4 }"
			:wrapper-col="{ span: 13 }"
			@finish="handleFinish"
			@validate="handleValidate"
			@finishFailed="handleFinishFailed"
			:fields="formFields"
			:scrollToFirstError="{ behavior: 'auto', block: 'center' }"
		>
			<a-col :span="24">
				<a-form-item :wrapper-col="{ span: 24, offset: 7 }">
					<a-space>
						<a-button
							type="primary"
							html-type="submit"
							:loading="loading"
						>
							Submit
						</a-button>
						<a-button @click="resetForm">Reset</a-button>
						<a-button @click="test">test</a-button>
					</a-space>
				</a-form-item>
			</a-col>
		</c-form>
	</a-card>
</template>
<script lang="ts" setup>
import { useTitle } from '@/hooks'
import { useCreateForm } from './config'

useTitle('这是一个超级牛掰的Form示例😊')

const { formRef, formFields, formModel } = useCreateForm()

Object.assign(formModel, {
	name: '',
	region: undefined,
	date: undefined,
	delivery: false,
	type: ['1'],
	resource: '2',
	desc: '',
	img: [
		'https://drug-platform.cdn.bcebos.com/online/drug/d1689948080778174209.png',
		'https://drug-platform.cdn.bcebos.com/online/drug/d1689951372085512039.png',
		'https://drug-platform.cdn.bcebos.com/online/drug/d1689951398547482543.png',
		'https://drug-platform.cdn.bcebos.com/online/drug/d1689948080778174209.png',
		'https://drug-platform.cdn.bcebos.com/online/drug/d1689951372085512039.png',
		'https://drug-platform.cdn.bcebos.com/online/drug/d1689951398547482543.png'
	],
	img2: 'https://drug-platform.cdn.bcebos.com/online/drug/d1689951372085512039.png',
	InputTag: ['213123']
})

const loading = ref(false)
const handleFinish = values => {
	// eslint-disable-next-line
	console.log(values, formModel)
}
const handleFinishFailed = errors => {
	// eslint-disable-next-line
	console.log('errors', errors)
}
const resetForm = () => formRef.value?.resetFields()
const test = () => {
	try {
		formRef.value?.validate()
	} catch (error) {
		// console.log('🚀 ~ error:', error)
	}
}

const handleValidate = (...args) => {
	// console.log(args)
}
</script>
<style scoped>
:deep(.form-title) {
	padding-left: 140px;
}
</style>
